<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增实验报告管理')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: summernote-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-report-add" th:object="${experimentClassProject}" enctype="multipart/form-data">
        <input name="classProjectId" th:field="*{classProjectId}" type="hidden">

        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label">报告标题：</label>
                <div class="col-sm-8">
                    <input name="reportTitle" class="form-control" type="text">
                </div>
            </div>
        </div>

        <div class="col-xs-12">
            <div class="form-group">
                <label class="col-sm-3 control-label">报告内容：</label>
                <div class="col-sm-8">
                    <input type="hidden" class="form-control" name="reportContent">
                    <div class="summernote" id="reportContent"></div>
                </div>
            </div>
        </div>

        <div class="col-xs-15">
            <div class="form-group">
                <div class="ry-card-title"><h4><b>一、预习内容</b></h4></div>
                <div class="ry-card-title">1、实验目的和要求</div>
                <div class="col-sm-12">
                    <input type="hidden" class="form-control" name="experimentPurposeDemand">
                    <div class="summernote" id="experimentPurposeDemand"></div>
                </div>

                <div class="ry-card-title">2、实验原理（算法思想、实验内容及方法等）</div>
                <div class="col-sm-12">
                    <input type="hidden" class="form-control" name="experimentPrinciple">
                    <div class="summernote" id="experimentPrinciple"></div>
                </div>

                <div class="ry-card-title">3、实验设备（硬件和软件环境）</div>
                <div class="col-sm-12">
                    <input type="hidden" class="form-control" name="experimentEquipment">
                    <div class="summernote" id="experimentEquipment"></div>
                </div>
            </div>
        </div>

        <div class="col-xs-15">
            <div class="form-group">
                <div class="ry-card-title"><h4><b>二、实验过程</b></h4></div>
                <div class="ry-card-title">（源程序及注释或操作步骤）</div>
                <div class="col-sm-12">
                    <input type="hidden" class="form-control" name="experimentProcedure">
                    <div class="summernote" id="experimentProcedure"></div>
                </div>
            </div>
        </div>

        <div class="col-xs-15">
            <div class="form-group">
                <div class="ry-card-title"><h4><b>三、实验结果与分析</b></h4></div>
                <div class="ry-card-title">（对程序输出或实验结果进行分析：与预期输出结果不同时，分析原因。）</div>
                <div class="col-sm-12">
                    <input type="hidden" class="form-control" name="experimentResultAnalysis">
                    <div class="summernote" id="experimentResultAnalysis"></div>
                </div>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: summernote-js"/>
<script th:inline="javascript">
    var prefix = ctx + "college/report"

    $("#form-report-add").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            // 处理文件上传表单提交
            var formData = new FormData($('#form-report-add')[0]);
            $.ajax({
                url: prefix + "/add",
                type: "post",
                data: formData,
                cache: false,
                contentType: false,
                processData: false,
                dataType: "json",
                success: function(result) {
                    if (result.code == web_status.SUCCESS) {
                        $.modal.msgSuccess("操作成功");
                        $.operate.closeCurrentTab();
                    } else {
                        $.modal.msgError(result.msg);
                    }
                }
            });
        }
    }

    $("input[name='submitTime']").datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });

    $(function() {
        $('.summernote').summernote({
            lang: 'zh-CN',
            dialogsInBody: true,
            height: 500,
            placeholder:'请输入内容',
            callbacks: {
                onChange: function(contents, $edittable) {
                    $("input[name='" + this.id + "']").val(contents);
                },
                onImageUpload: function(files) {
                    var obj = this;
                    var data = new FormData();
                    data.append("file", files[0]);
                    $.ajax({
                        type: "post",
                        url: ctx + "common/upload",
                        data: data,
                        cache: false,
                        contentType: false,
                        processData: false,
                        dataType: 'json',
                        success: function(result) {
                            if (result.code == web_status.SUCCESS) {
                                $('#' + obj.id).summernote('insertImage', result.url);
                            } else {
                                $.modal.alertError(result.msg);
                            }
                        },
                        error: function(error) {
                            $.modal.alertWarning("图片上传失败。");
                        }
                    });
                }
            }
        });
    });

    // 文件上传处理函数
    function uploadFile() {
        var file = document.getElementById("fileUpload").files[0];
        if (!file) {
            $.modal.alertWarning("请先选择文件");
            return;
        }

        // 验证文件大小（限制50MB）
        if (file.size > 50 * 1024 * 1024) {
            $.modal.alertWarning("文件大小不能超过50MB");
            return;
        }

        var formData = new FormData();
        formData.append("file", file);

        $.ajax({
            type: "post",
            url: ctx + "common/upload",
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            dataType: 'json',
            beforeSend: function() {
                $("#fileInfo").html('<i class="fa fa-spinner fa-spin"></i> 正在上传...');
            },
            success: function(result) {
                if (result.code == web_status.SUCCESS) {
                    $("#filePath").val(result.url);
                    $("#fileInfo").html('<i class="fa fa-check text-success"></i> 上传成功：' + file.name);
                } else {
                    $("#fileInfo").html('<i class="fa fa-times text-danger"></i> 上传失败：' + result.msg);
                }
            },
            error: function() {
                $("#fileInfo").html('<i class="fa fa-times text-danger"></i> 上传失败，请重试');
            }
        });
    }

    // 显示选中的文件名
    document.getElementById("fileUpload").addEventListener("change", function() {
        if (this.files.length > 0) {
            $("#fileInfo").html("选中文件：" + this.files[0].name);
        }
    });
</script>
</body>
</html>